<template>
	<view class="bg-white">
		<scroll-view scroll-y="true" class="scrollPage">
			<cu-custom>
			</cu-custom>
			<swiper v-if="mediaType === 'cardSwiper' && slideshowList.length > 0" id="cardSwiper" class="card-swiper"
				:indicator-dots="true" :circular="true" :autoplay="autoplay" :interval="interval" :duration="duration"
				@change="cardSwiperChange" indicator-active-color="#70c8e2">
				<swiper-item class="card-swiper-item" v-for="(item,index) in slideshowList" :key="index">
					<view class="swiper-item">
						<image :src="item.url" mode="aspectFill" v-if="item.type=='phoneSlideshow'"></image>
					</view>
				</swiper-item>
			</swiper>
			<view v-else-if="mediaType == 'video'" :style="[{height:videoHeight + 'px'}]"
				style="background-color:#f8f8f8" class="padding-bottom">
				<!-- #ifdef H5  -->
				<!-- style="width:100vw;height:100vh;position:absolute;top:50%;left: 50%;transform: translate(-50%,-50%);" -->
				<view class="video-js" :style="[{height:`calc(${videoHeight}px - 30rpx)`}]" style="width: 100vw;"
					ref="video">
				</view>
				<!--  #endif -->
				<!--  #ifdef MP-WEIXIN || APP-NVUE -->
				<video v-if="mediaType == 'video'" id="myVideo" :style="[{height:`calc(${videoHeight}px - 30rpx)`}]"
					style="width: 100%;" :src="playUrl" :autoplay="autoplay" controls>
				</video>
				<!--  #endif -->
			</view>

			<view class='notice row-middle flex justify-between' v-if="systemNoticeList.length">
				<view class="margin-left-sm">
					<text class="text-sm" style="border: solid #1CBBB4 1px;border-radius: 5px;padding: 2px 10px;"
						:style="{borderColor:themeConfig.primaryColor}">{{$t('notice')}}
					</text>
				</view>
				<text class='line'>|</text>
				<view class='swipers'>
					<swiper :indicator-dots="false" :autoplay="autoplay" interval="2500" duration="500" vertical="true"
						:circular="true">
						<block v-for="(item,index) in systemNoticeList" :key='index'>
							<swiper-item @tap="gotoSystemNotice()">
								<view class='line1'>{{item.summary}}</view>
							</swiper-item>
						</block>
					</swiper>
				</view>
				<view class="iconfont icon-xiangyou"></view>
			</view>

			<view v-if="weather && weather.weather && language=='zh'"
				class="flex justify-start padding-sm margin-sm common-box"
				:style="[{background:themeConfig.primaryColor}]">
				<image :src="weather.weatherImage" style="width: 120rpx;height: 120rpx" />
				<view class="text-white text-df">
					<view class="margin-bottom-xs text-sm">{{ weather.weather }} {{ weather.temperature }}°C</view>
					<view class="margin-bottom-xs text-sm">{{ weather.lowTemperature }}°C ~
						{{ weather.highTemperature }}°C</view>
					<view class="text-sm">
						<text>{{ weather.winDirection }}</text>
						<text class="margin-left-sm">{{ weather.winGrade }}</text>
						<text class="margin-left-sm">{{ weather.winSpeed }}</text>
						<text class="margin-left-sm">{{ $t('air')}}{{$t('quality') }}:{{ weather.airQuality }}</text>
					</view>
				</view>
			</view>

			<view class="cu-list grid col-3" v-if="productTypeList.length != 0">
				<view class="cu-item" @tap="gotoAreaList()">
					<view class="cuIcon-tag" :style="{color : themeConfig.primaryColor}">
					</view>
					<text>{{$t('area')}}</text>
				</view>
				<view class=" cu-item" @tap="gotoGroupList()" v-if="!websiteModel || websiteModel==='user'">
					<view class="cuIcon-file" :style="{color : themeConfig.primaryColor}">
					</view>
					<text>{{$t('group')}}</text>
				</view>
				<view class=" cu-item" @tap="gotoUserNotice()">
					<view class="cuIcon-notice" :style="{color : themeConfig.primaryColor}">
					</view>
					<text>{{$t('notice')}}</text>
				</view>
				<view class=" cu-item" @tap="gotoDeviceWarn()">
					<view class="cuIcon-warn" :style="{color : themeConfig.primaryColor}">
					</view>
					<text>{{$t('warn')}}</text>
				</view>
				<view class="cu-item" @tap="gotoDeviceStatus()">
					<view class="cuIcon-order" :style="{color : themeConfig.primaryColor}">
					</view>
					<text>{{$t('status')}}</text>
				</view>
				<view class=" cu-item" @tap="gotoDeviceCamera()">
					<view class="cuIcon-record" :style="{color : themeConfig.primaryColor}">
					</view>
					<text>{{$t('camera')}}</text>
				</view>
			</view>

			<view v-if=" videoList.length !=0" class="cu-bar bg-white"
				style="border-top-left-radius:20rpx;border-top-right-radius:20rpx;">
				<view class="action">
					<text class="text-bold ztnCustom-color-black">{{$t('video')}}</text>
				</view>
			</view>
			<view v-if="videoList.length != 0" class="nav-list text-white">
				<view v-for="(item,index) in videoList" :key="index" :style="[{backgroundImage:`url(${item.iconUrl})`}]"
					style="border-radius: 12rpx;width: 45%;height:180rpx;margin: 20rpx 2.5% ;background-size: cover;background-position: center;position:relative"
					@tap="tapVideo(item)">
					<view :class="playUrl == item.url ? 'cuIcon-stop' : 'cuIcon-playfill'"
						style="font-size:60rpx;position:absolute;left:50%;top:50%;transform: translate(-50%, -50%);">
					</view>
				</view>
			</view>


			<view v-if="productTypeList.length != 0" class="cu-bar"
				style="border-top-left-radius:20rpx;border-top-right-radius:20rpx;">
				<view class="action">
					<text class="text-bold">{{$t('product')}}</text>
				</view>
				<view class="action" @tap="gotoProductList()">
					<text class="cuIcon-right"></text>
				</view>
			</view>
			<view v-if="productTypeList.length != 0" class='nav-list'>
				<view class="nav-li text-white" :style="[{backgroundColor:`${item.color}`}]" @tap="gotoDeviceList(item)"
					v-for="(item,index) in productTypeList" :key="index">
					<view class="nav-title cuIcon-more"></view>
					<view class="nav-name">{{item.name}}</view>
					<view class="cu-avatar bg-white margin-right-sm nav-image"
						:style="[{backgroundImage:`url(${item.iconUrl})`}]" style="background-color:rgba(0, 0, 0, 0)">
					</view>
				</view>
			</view>
			<view :style="[{height:`${tabbarHeight}px`}]"></view>
		</scroll-view>
	</view>
</template>

<script>
	import * as deviceBelongApi from '@/api/iot/iotDeviceBelongApi.js'
	import * as iotProductApi from '@/api/iot/iotProductApi.js'
	import * as iotProductUserApi from '@/api/iot/iotProductUserApi.js'
	import * as iotProductCompanyApi from '@/api/iot/iotProductCompanyApi.js'
	import * as companyApi from '@/api/iot/iotCompanyApi.js'
	import * as systemNoticeApi from '@/api/common/commonSystemNoticeApi.js'
	import *
	as weatherApi from '@/api/common/commonWeatherApi.js'
	import themeColors from '@/util/themeColors.js'
	import * as storage from '@/util/storage.js'
	import {
		nextTick
	} from 'vue'
	export default {
		name: 'MyHome',
		data() {
			return {
				weather: null,
				mediaType: 'cardSwiper',
				autoplay: true,
				interval: 5000,
				duration: 500,
				slideshowList: [],
				videoHeight: '',
				videoList: [],
				playUrl: '',
				productTypeList: [],
				systemNoticeList: [],
				tabbarHeight: storage.getTabbarHeight(),
				language: storage.getLanguage(),
				userId: storage.getUserId(),
				companyId: storage.getCompanyId(),
				websiteModel: storage.getWebsiteModel()
			}
		},
		name: 'Home',
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		mounted() {
			this.init()
		},
		emits: ['list'],
		methods: {
			getWeather() {
				weatherApi.getWeather({
					ip: storage.getIp()
				}).then(res => {
					const {
						data,
					} = res
					this.weather = data
				})
			},
			pageGetSystemNotice() {
				systemNoticeApi.pageGetSystemNotice({
					language: this.language,
					companyId: this.companyId,
					onlyCompany: false,
					currentPage: 1,
					pageSize: 999
				}).then(res => {
					const {
						data
					} = res
					if (data) {
						const systemNoticeList = []
						data.data.forEach(item => {
							if (item.languageList.indexOf(this.language) >= 0) {
								systemNoticeList.push(item)
							}
						})

						this.systemNoticeList = systemNoticeList
					}
				})
			},
			gotoUserNotice() {
				uni.navigateTo({
					url: `/pages/userNotice/userNotice`
				})
			},
			gotoDeviceCamera() {
				uni.navigateTo({
					url: `/pages/cameraList/cameraList`
				})
			},
			gotoDeviceWarn() {
				uni.navigateTo({
					url: `/pages/deviceWarn/deviceWarn`
				})
			},
			gotoDeviceStatus() {
				uni.navigateTo({
					url: `/pages/deviceStatus/deviceStatus`
				})
			},
			gotoSystemNotice() {
				uni.navigateTo({
					url: `/pages/systemNotice/systemNotice`
				})
			},
			gotoGroupList() {
				uni.navigateTo({
					url: `/pages/groupList/groupList`
				})
			},
			gotoAreaList() {
				uni.navigateTo({
					url: `/pages/areaList/areaList`
				})
			},
			init() {
				this.getPhoneSlideshow()
				this.pageGetSystemNotice()
				this.getVideoList()
				this.listProduct()
				this.getWeather()
			},
			getPhoneSlideshow() {
				if (!this.companyId) {
					return
				}
				companyApi.getCompanyResource({
					type: 'phoneSlideshow',
					companyId: this.companyId
				}).then((res) => {
					if (res.data) {
						let data = res.data
						let list = []
						for (let i = 0; i < data.length; i++) {
							let obj = {}
							let {
								type,
								url
							} = data[i]
							obj.id = i
							obj.type = type
							obj.url = url
							list.push(obj)
						}
						this.slideshowList = list
						nextTick(() => {
							this.getCardSwiperHeight()
						})
					}
				})
			},
			getCardSwiperHeight() {
				let videoHeight = storage.getVideoHeight()
				if (videoHeight) {
					this.videoHeight = videoHeight
				} else {
					uni.createSelectorQuery().in(this).select('#cardSwiper').boundingClientRect((e) => {
						this.videoHeight = e.height
						storage.setVideoHeight(e.height)
					}).exec()
				}
			},
			cardSwiperChange(e) {
				this.cardCur = e.detail.current
			},
			getVideoList() {
				if (!this.companyId) {
					return
				}
				companyApi.getCompanyResource({
					type: 'video',
					companyId: this.companyId
				}).then((res) => {
					if (res.data) {
						let data = res.data
						let list = []
						for (let i = 0; i < data.length; i++) {
							if (!data[i].status) {
								continue
							}
							list.push(data[i])
						}
						this.videoList = list
					}
				})
			},
			tapVideo(e) {
				if (this.mediaType === 'video') {
					this.closeVideo()
					return
				}
				this.mediaType = 'video'
				this.playUrl = e.url
				// #ifdef H5
				nextTick(() => {
					const video = document.createElement('video')
					video.id = 'video'
					// video.style ="width:100%;height:100%;position:absolute;top:50%;left: 50%;transform: translate(-50%,-50%);"
					video.autoplay = true
					video.controls = true
					const source = document.createElement('source')
					source.src = e.url
					video.appendChild(source)
					this.$refs.video.$el.appendChild(video)
					videojs('video')
				})
				// #endif
			},
			closeVideo() {
				this.mediaType = 'cardSwiper'
				this.playUrl = ''
			},
			gotoProductList() {
				uni.navigateTo({
					url: `/pages/productList/productList`
				})
			},
			listProduct() {
				let api
				switch (this.websiteModel) {
					case 'system':
						api = iotProductApi.listProduct({})
						break
					case 'company':
					case 'dept':
						api = iotProductCompanyApi.listProduct({
							companyId: this.companyId
						})
						break
					default:
						api = iotProductUserApi.listProduct({
							userId: this.userId
						})
				}

				api.then((res) => {
					if (res.data) {
						const data = res.data
						const productTypeList = []
						let standardColor = themeColors.standardColor
						let colorArr = []
						for (let color in standardColor) {
							if (color == 'grey') {
								break
							} else {
								colorArr.push(standardColor[color])
							}
						}
						let colorIndex = 0
						let colorLength = colorArr.length
						for (let i = 0; i < data.length; i++) {
							if (i > 3) {
								break
							}
							if (colorIndex < colorLength) {
								data[i].color = colorArr[colorIndex]
								colorIndex = colorIndex + 1
							} else {
								data[i].color = colorArr[0]
								colorIndex = 1
							}
							productTypeList.push(data[i])
						}
						this.productTypeList = productTypeList
					}
				})
			},
			gotoDeviceList(item) {
				storage.setProductId(item.productId)
				let option = {
					component: 'list'
				}
				this.$emit('list', option);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.notice {
		width: 100%;
		height: 70rpx;
		border-radius: 10rpx;
		background-color: #fff;
		margin-bottom: 25rpx;
		line-height: 70rpx;
		padding: 0 14rpx;

		.line {
			color: #CCCCCC;
		}

		.pic {
			width: 130rpx;
			height: 36rpx;

			image {
				width: 100%;
				height: 100%;
				display: block !important;
			}
		}

		.swipers {
			height: 100%;
			width: 444rpx;
			overflow: hidden;

			swiper {
				height: 100%;
				width: 100%;
				overflow: hidden;
				font-size: 22rpx;
				color: #333333;
			}
		}

		.iconfont {
			color: #999999;
			font-size: 20rpx;
		}
	}

	.line1 {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap
	}

	.scrollPage {
		height: 100vh;
	}

	.card-swiper-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		overflow: unset;
	}

	.ztnCustom-videoImage:nth-child(odd) {
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.ztnCustom-videoImage:nth-child(even) {
		margin-right: 30rpx;
	}

	.cardTitle {
		color: #fff;
		padding: 60rpx 30rpx;
		font-size: 40rpx;
		font-weight: 300;
		/* transform: skew(-10deg, 0deg); */
		position: relative;
		text-shadow: 0px 0px 6rpx rgba(0, 0, 0, 0.3)
	}

	.nav-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0px 40rpx 0px;
		justify-content: space-between;
	}

	.nav-li {
		padding: 30rpx;
		border-radius: 12rpx;
		width: 45%;
		margin: 0 2.5% 40rpx;
		background-image: url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png);
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1;
	}

	.nav-li::after {
		content: "";
		position: absolute;
		z-index: -1;
		background-color: inherit;
		width: 100%;
		height: 100%;
		left: 0;
		bottom: -10%;
		border-radius: 10rpx;
		opacity: 0.2;
		transform: scale(0.9, 0.9);
	}

	.nav-li.cur {
		color: #fff;
		background: rgb(94, 185, 94);
		box-shadow: 4rpx 4rpx 6rpx rgba(94, 185, 94, 0.4);
	}

	.nav-title {
		font-size: 32rpx;
		font-weight: 300;
	}

	.nav-title::first-letter {
		font-size: 40rpx;
		margin-right: 4rpx;
	}

	.nav-name {
		font-size: 28rpx;
		text-transform: Capitalize;
		margin-top: 20rpx;
		position: relative;
	}

	.nav-name::before {
		content: "";
		position: absolute;
		display: block;
		width: 40rpx;
		height: 6rpx;
		background: #fff;
		bottom: 0;
		right: 0;
		opacity: 0.5;
	}

	.nav-name::after {
		content: "";
		position: absolute;
		display: block;
		width: 100rpx;
		height: 1px;
		background: #fff;
		bottom: 0;
		right: 40rpx;
		opacity: 0.3;
	}

	.nav-name::first-letter {
		font-weight: bold;
		font-size: 36rpx;
		margin-right: 1px;
	}

	.nav-image {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		font-size: 52rpx;
		width: 60rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
	}

	.text-light {
		font-weight: 300;
	}
</style>
